<template>
	<view class="details">
		<!-- #ifndef MP-ALIPAY -->
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">详情</block>
			</cu-custom>
		<!-- #endif -->
		<block v-if="loaded">
			<view class="cu-card case no-card">
				<view class="cu-item shadow">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="{'background-image':'url('+detailsObj.author.avatar_url+')'}"></view>
							<view class="content">
								<view class="text-grey">{{detailsObj.title}}</view>
								<view class="text-gray text-sm flex justify-between">
									{{detailsObj.create_at|handlTime}}
									<view class="text-gray text-sm">
										<text class="cuIcon-attentionfill margin-lr-xs"></text> {{detailsObj.visit_count}}
										<text class="cuIcon-messagefill margin-lr-xs"></text> {{detailsObj.reply_count}}
									</view>
								</view>
							</view>
							<view class="action">
								<button class="cu-btn round sm bg-green shadow" @tap="collectOrDel(detailsObj.is_collect)">
									<text v-if="detailsObj.is_collect" class="cuIcon-favorfill text-orange"></text>
									<text v-else class="cuIcon-favorfill"></text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="detail-content">
				<jyf-parser ref="article"></jyf-parser>
			</view>
			<view class="cu-list menu-avatar comment solids-top">
				<view class="cu-item" v-for="item in detailsObj.replies" :key="item.id">
					<view class="cu-avatar round" :style="{'background-image':'url('+item.author.avatar_url+')'}"></view>
					<view class="content">
						<view class="text-grey">{{item.author.loginname}}</view>
						<view class="text-gray text-content text-df">
							<rich-text :nodes="item.content"></rich-text>
						</view>
						<view class="margin-top-sm flex justify-between">
							<view class="text-gray text-df">{{item.create_at|handlTime}}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view v-else class="cu-load loading"></view>
	</view>
</template>

<script>
	import getApp from '../../App.vue'
	export default {
		data() {
			return {
				id: '',
				detailsObj: {},
				loaded: false
			};
		},
		methods: {
			async getTopic() { // 获取主题详情
				try {
					const res = await this.$api.getTopic(this.id, {
						mdrender: true,
						accesstoken: getApp.globalData.accesstoken
					})
					this.detailsObj = res;
					this.loaded = true;
					this.$nextTick(function() {
						this.$refs.article.setContent(res.content);
					})
				} catch (err) {

				}
			},
			async collectOrDel(status) { //收藏或取消收藏
				try{
					if(getApp.globalData.accesstoken) {
						if(status) {
							await this.$api.deCollect({
								accesstoken: getApp.globalData.accesstoken,
								topic_id: this.id
							})
							uni.showToast({
								title: '取消收藏',
								icon: 'none'
							});
						}else {
							await this.$api.collect({
								accesstoken: getApp.globalData.accesstoken,
								topic_id: this.id
							})
							uni.showToast({
								title: '收藏成功'
							});
						}
						this.getTopic();
						return;
					}
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}catch(err){}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getTopic()
		}
	}
</script>

<style lang="scss">
	.detail-content {
		padding: 30rpx;
		background: #FFFFFF;
	}
</style>
